<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Basic Controls II in Mono Winforms</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Winforms, Mono, IronPython, basic controls, programming, tutorial">
<meta name="description" content="Basic Controls II in Mono Winforms">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href=".." title="Home">Contents</a>


<h1>Basic Controls II in Mono Winforms</h1>


<p>
In this part of the IronPython Mono Winforms tutorial, we will continue introducing 
basic Mono Winforms controls.
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<h2>RadioButton</h2>

<p>
The <b class="keyword">RadioButton</b> control enables the user to select a single option
from a group of choices when paired with other RadioButton controls. 
The <b class="keyword">GroupBox</b> control is used to pair radio buttons together.
</p>

<div class="codehead">radiobutton.py</div>
<pre class="code">
#!/usr/bin/ipy

import clr
clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")

from System.Windows.Forms import Application, Form, StatusBar
from System.Windows.Forms import RadioButton, GroupBox
from System.Drawing import Size, Point


class IForm(Form):

    def __init__(self):

        self.Text = "RadioButton"
        self.Size = Size(240, 240)

        gb = GroupBox()
        gb.Text = "Sex"
        gb.Size = Size(120, 110)
        gb.Location = Point(20, 20)
        gb.Parent = self

        male = RadioButton()
        male.Text = "Male"
        male.Parent = gb
        male.Location = Point(10, 30)
        male.CheckedChanged += self.OnChanged


        female = RadioButton()
        female.Text = "Female"
        female.Parent = gb
        female.Location = Point(10, 60)
        female.CheckedChanged += self.OnChanged

        self.statusbar = StatusBar()
        self.statusbar.Parent = self

        self.CenterToScreen()

    def OnChanged(self, sender, event):
        if sender.Checked:
            self.statusbar.Text = sender.Text
    
    
Application.Run(IForm())
</pre>

<p>
In our example, we show two radio buttons in a group box. Only one 
option is selectable at a time. The option value is shown in the statusbar.
</p>

<pre class="explanation">
 gb = GroupBox()
 gb.Text = "Sex"
</pre>

<p>
<b class="keyword">GroupBox</b> control is used to group radio buttons together.
This way we can choose only one radio button control at a time. 
</p>

<pre class="explanation">
 male = RadioButton()
 male.Text = "Male"
 male.Parent = gb
</pre>

<p>
<b class="keyword">RadioButton</b> control with text "Male" is created. It's parent is
the group box control. 
</p>

<pre class="explanation">
 def OnChanged(self, sender, event):
     if sender.Checked:
         self.statusbar.Text = sender.Text
</pre>

<p>
The <b class="keyword">OnChanged()</b> method sets the text of the currently
selected radio button to the statusbar control. 
</p>

<br>
<img src="/img/gui/ironpython/radiobutton.png" alt="RadioButton">
<div class="figure">Figure: RadioButton</div>



<h2>MonthCalendar</h2>

<p>
In the next example, we will show a <b class="keyword">MonthCalendar</b> control. 
The MonthCalendar control allows the user to select a date using a visual display.
</p>

<div class="codehead">monthcalendar.py</div>
<pre class="code">
#!/usr/bin/ipy

import clr
clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")

from System.Windows.Forms import Application, Form
from System.Windows.Forms import Label, MonthCalendar
from System.Drawing import Size, Point


class IForm(Form):

    def __init__(self):
        self.Text = 'MonthCalendar'
        self.Size = Size(240, 240)
        
        calendar = MonthCalendar()
        calendar.Parent = self
        calendar.Location = Point(20, 20)
        calendar.DateSelected += self.OnSelected

        self.date = Label()
        self.date.Location = Point(30, 180)
        self.date.Parent = self
        dt = calendar.SelectionStart
        self.date.Text = str(dt.Month) + "/" + str(dt.Day) + "/" + str(dt.Year)
        
        self.CenterToScreen()
    

    def OnSelected(self, sender, event): 
        dt = sender.SelectionStart
        self.date.Text = str(dt.Month) + "/" + str(dt.Day) + "/" + str(dt.Year)
    

Application.Run(IForm())
</pre>

<p>
In the example, we show a <b class="keyword">MonthCalendar</b> and a <b class="keyword">Label</b>.
</p>

<pre class="explanation">
  calendar = MonthCalendar()
  ...
  self.date = Label()
</pre>

<p>
We have two controls. A <b class="keyword">MonthCalendar</b> and a <b class="keyword">Label</b>.
The latter shows the currently selected date. 
</p>

<pre class="explanation">
 def OnSelected(self, sender, event): 
     dt = sender.SelectionStart
     self.date.Text = str(dt.Month) + "/" + str(dt.Day) + "/" + str(dt.Year)
</pre>

<p>
When we select a date from the <b class="keyword">MonthCalendar</b>, 
the <b class="keyword">OnSelected()</b> method is called. 
The <b class="keyword">SelectionStart</b> property gets the start date 
of the selected range of dates. 
</p>


<br>
<img src="/img/gui/ironpython/calendar.png" alt="MonthCalendar">
<div class="figure">Figure: MonthCalendar</div>


<h2>TextBox</h2>

<p>
The <b class="keyword">TextBox</b> control is used to display or accept some 
text. The text can be single or multiline. This control is also capable of password masking. 
</p>

<div class="codehead">textbox.py</div>
<pre class="code">
#!/usr/bin/ipy

import clr
clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")

from System.Windows.Forms import Application, Form
from System.Windows.Forms import Label, TextBox
from System.Drawing import Size, Point



class IForm(Form):

    def __init__(self):

        self.Text = 'TextBox'

        self.text = Label()
        self.text.Parent = self
        self.text.Text = "..."
        self.text.AutoSize = True
        self.text.Location = Point(60, 40)

        tbox = TextBox()
        tbox.Parent = self
        tbox.Location = Point(60, 100)
        tbox.KeyUp += self.OnKeyUp

        self.Size = Size(250, 200)
        self.CenterToScreen()
    

    def OnKeyUp(self, sender, event): 
        self.text.Text = sender.Text
    

Application.Run(IForm())
</pre>

<p>
This example shows a text box and a label. The text that we key in the text box
is displayed immediately in the label control. 
</p>


<pre class="explanation">
 self.text = Label()
 ...
 self.text.AutoSize = True
</pre>

<p>
The <b class="keyword">Label</b> control is created. The <b class="keyword">AutoSize</b> 
property ensures, that the Label grows to show the text.  
</p>

<pre class="explanation">
 tbox = TextBox()
 ...
 tbox.KeyUp += self.OnKeyUp
</pre>

<p>
We plug in the <b class="keyword">KeyUp</b> event into the <b class="keyword">TextBox</b> control.
When we release the key, <b class="keyword">OnKeyUp()</b> method is called. 
</p>


<pre class="explanation">
 def OnKeyUp(self, sender, event): 
     self.text.Text = sender.Text
</pre>

<p>
In the <b class="keyword">OnKeyUp()</b> method we update the label control 
with the text from the text box control. 
</p>


<br>
<img src="/img/gui/ironpython/textbox.png" alt="TextBox">
<div class="figure">Figure: TextBox</div>


<h2>PictureBox</h2>

<p>
The <b class="keyword">PictureBox</b> control is used for displaying a picture on the form.
</p>

<div class="codehead">picturebox.py</div>
<pre class="code">
#!/usr/bin/ipy

import sys
import clr
clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")

from System.Windows.Forms import Application, Form, PictureBox
from System.Drawing import Size, Point, Bitmap


class IForm(Form):

    def __init__(self):
        self.Text = 'PictureBox'
        
        try:
            castle = Bitmap('redrock.png') 
        except Exception, e:
            print 'Cannot read image file'
            print e.msg
            sys.exit(1)
 
        pb = PictureBox()
        pb.Parent = self
        pb.Size = Size(castle.Width, castle.Height)
        pb.Location = Point(2, 2)
        pb.Image = castle

        self.Size = Size(castle.Width, castle.Height)
        self.CenterToScreen()


Application.Run(IForm())
</pre>

<p>
The example shows a png image on the form.
</p>

<pre class="explanation">
 try:
     castle = Bitmap('redrock.png') 
 except Exception, e:
     print 'Cannot read image file'
     print e.msg
     sys.exit(1)      
</pre>

<p>
We get a bitmap from the current working directory.
</p>

<pre class="explanation">
 pb = PictureBox()     
</pre>

<p>
The <b class="keyword">PictureBox</b> control is created.
</p>

<pre class="explanation">
 pb.Image = castle    
</pre>

<p>
The <b class="keyword">Image</b> property points to the bitmap, we have created.
</p>

<pre class="explanation">
 self.Size = Size(castle.Width, castle.Height)
</pre>

<p>
The size of the form is equal to the size of the bitmap.
</p>

<br>
<img src="/img/gui/ironpython/picturebox.jpg" alt="PictureBox">
<div class="figure">Figure: PictureBox</div>

<hr class="btm">

<p>
We have finished chapter of the Mono Winforms programming tutorial, dedicated to basic controls. 
</p>


<div class="center">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<br>

<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified January 29, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

